<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <title>搜索页面</title>

    <link href="../AmazeUI-2.4.2/assets/css/amazeui.css" rel="stylesheet" type="text/css"/>
    <link href="../AmazeUI-2.4.2/assets/css/admin.css" rel="stylesheet" type="text/css"/>

    <link href="../basic/css/demo.css" rel="stylesheet" type="text/css"/>

    <link href="../css/seastyle.css" rel="stylesheet" type="text/css"/>

</head>

<body>

<!--顶部导航条 -->
<div class="am-container header">
    <ul class="message-l">
        <div class="topMessage">
            <div class="menu-hd">
            </div>
        </div>
    </ul>
    <ul class="message-r">
        <div class="topMessage home">
            <div class="menu-hd"><a href="/home" target="_top" class="h">商城首页</a></div>
        </div>
        <div class="topMessage my-shangcheng">
            <div class="menu-hd MyShangcheng"><a href="/personCenter" target="_top"><i
                    class="am-icon-user am-icon-fw"></i>个人中心</a></div>
        </div>
        <div class="topMessage mini-cart">
            <div class="menu-hd"><a id="mc-menu-hd" href="/cartList" target="_top"><i
                    class="am-icon-shopping-cart  am-icon-fw"></i><span>购物车</span></a>
            </div>
        </div>
        <div class="topMessage favorite">
            <div class="menu-hd"><a href="/toCollection" target="_top"><i
                    class="am-icon-heart am-icon-fw"></i><span>收藏夹</span></a></div>
        </div>
    </ul>
</div>

<!--悬浮搜索框-->

<div class="nav white">
    <div class="logo"><img src="../images/logo.png"/></div>
    <div class="logoBig">
        <li><img src="../images/logobig.png"/></li>
    </div>

    <div class="search-bar pr">
        <a name="index_none_header_sysc" href="#"></a>
        <form action="/search">
            <input id="searchInput" name="searchMsg" type="text" placeholder="搜索" value="${searchMsg}"
                   autocomplete="off">
            <input id="ai-topsearch" class="submit am-btn" value="搜索" index="1" type="submit">
        </form>
    </div>
</div>

<div class="clear"></div>
<b class="line"></b>
<div class="search">
    <div class="search-list">
        <div class="nav-table">
            <div class="long-title"><span class="all-goods">全部分类</span></div>
            <div class="nav-cont">
                <ul>
                    <li class="index"><a href="#">首页</a></li>
                    <li class="qc"><a href="#">闪购</a></li>
                    <li class="qc"><a href="#">限时抢</a></li>
                    <li class="qc"><a href="#">团购</a></li>
                    <li class="qc last"><a href="#">大包装</a></li>
                </ul>
                <div class="nav-extra">
                    <i class="am-icon-user-secret am-icon-md nav-user"></i><b></b>我的福利
                    <i class="am-icon-angle-right" style="padding-left: 10px;"></i>
                </div>
            </div>
        </div>


        <div class="am-g am-g-fixed">
            <div class="am-u-sm-12 am-u-md-12">
                <div class="theme-popover">
                    <div class="searchAbout">

                    </div>
                    <ul class="select">
                        <div class="clear"></div>
                        <li class="select-list">
                            <dl id="select1">
                                <dt class="am-badge am-round">品牌</dt>

                                <div class="dd-conent" title="">
                                    <dd class="select-all selected"><a href="0">全部</a></dd>
                                    <c:forEach items="${brands}" var="brand">
                                        <dd><a href="${brand.brandId}">${brand.brandName}</a></dd>
                                    </c:forEach>
                                </div>

                            </dl>
                        </li>
                        <li class="select-list">
                            <dl id="select2">
                                <dt class="am-badge am-round">种类</dt>
                                <div class="dd-conent" title="">
                                    <dd class="select-all selected"><a href="0">全部</a></dd>
                                    <c:forEach items="${kinds}" var="kind">
                                        <dd><a href="${kind.kindId}">${kind.kindName}</a></dd>
                                    </c:forEach>
                                </div>
                            </dl>
                        </li>
                    </ul>
                    <div class="clear"></div>
                </div>
                <div class="search-content">
                    <div class="sort">
                        <li class="first" value="0"><a title="综合">综合排序</a></li>
                        <li value="1"><a title="销量">销量排序</a></li>
                        <li value="2"><a title="价格">价格优先</a></li>
                    </div>
                    <div class="clear"></div>

                    <ul class="am-avg-sm-2 am-avg-md-3 am-avg-lg-4 boxes">
                    </ul>
                </div>
                <div class="clear"></div>
                <!--分页 -->
                <ul class="am-pagination am-pagination-right">
                    <li><a href="1">首页</a></li>
                    <li><a href="#">上一页</a></li>
                    <li><a href="#">下一页</a></li>
                    <li><a href="#">尾页</a></li>
                    <li>商品展示数量:
                        <select style="height: 25px">
                            <option value="8">8</option>
                            <option value="12">12</option>
                            <option value="16">16</option>
                        </select>
                    </li>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;
                    第&nbsp;<span id="currPageNo">1</span>&nbsp;页&nbsp;/&nbsp;共&nbsp;<span id="totalPage">6</span>&nbsp;页（<span
                        id="totalCount">16</span>条）
                </ul>

            </div>
        </div>
        <div class="footer">
            <div class="footer-hd">
                <p>
                    <b>|</b>
                    <a href="# ">商城首页</a>
                    <b>|</b>
                    <a href="# ">支付宝</a>
                    <b>|</b>
                    <a href="# ">物流</a>
                </p>
            </div>
            <div class="footer-bd ">
                <p>
                    <a href="# ">合作伙伴</a>
                    <a href="# ">联系我们</a>
                    <a href="# ">网站地图</a>
                </p>
            </div>
        </div>
    </div>

</div>

<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="../js/script.js"></script>
<script type="text/javascript">
    $(function () {
        var brandId = 0;
        var kindId = 0;
        var currPageNo = 1;
        var sortNum = 0;
        var pageSize = 8;
        var searchMsg = $("#searchInput").val();
        selectByCategory();

        function selectByCategory() {
            /**
             * 获取商品列表
             */
            $.getJSON("/searchByCategory", {
                "searchMsg": searchMsg,
                "brandId": brandId,
                "kindId": kindId,
                "sortNum": sortNum,
                "currPageNo": currPageNo,
                "pageSize": pageSize
            }, function (data) {
                var contextMsg = "";
                if (data == "") {
                    contextMsg = "<p align='center' style='font-size: 30px'>抱歉没有查到相关商品信息！！</p>";
                }
                $(data).each(function () {
                    contextMsg += "<li>" +
                        "<a href='toProductInfo?productId=" + this.productId + "'>" +
                        "<div class='i-pic limit'>" +
                        "<img src='" + this.pictureUrl + "' width='250px' height='200px'>" +
                        "<p class='title f1'>" + this.productName +
                        "</p>" +
                        "<p class='price f1'><b>¥</b>" +
                        "<strong>" + this.price +
                        "</strong></p>" +
                        "<p class='number fl'>销量<span>" + this.totalSales +
                        "</span></p>" +
                        "</div>" +
                        "</a>" +
                        "</li>";
                })
                $(".boxes").empty().append(contextMsg);
            })
            $.getJSON("/searchCount", {
                "searchMsg": searchMsg,
                "brandId": brandId,
                "kindId": kindId,
                "pageSize": pageSize
            }, function (data) {
                if (data.totalCount == 0) {
                    $(".am-pagination").hide();
                } else {
                    $(".am-pagination").show();
                    $("#totalCount").text(data.totalCount);
                    $("#totalPage").text(data.totalPage);
                }
            })
        }

        $(".sort li").click(function () {
            $(this).addClass("first").siblings().removeClass("first");
            sortNum = $(this).val();
            currPageNo = 1;
            selectByCategory();
        })
        $(".am-pagination li:eq(0) a").click(function () {
            currPageNo = $(this).attr("href");
            selectByCategory();
            $("#currPageNo").text(currPageNo);
            return false;
        })
        $(".am-pagination li:eq(1) a").click(function () {
            currPageNo = parseInt($("#currPageNo").text()) - 1;
            if (currPageNo <= 1) {
                currPageNo = 1;
            }
            $("#currPageNo").text(currPageNo);
            selectByCategory();
            return false;
        })
        $(".am-pagination li:eq(2) a").click(function () {
            currPageNo = parseInt($("#currPageNo").text()) + 1;
            if (currPageNo > $("#totalPage").text()) {
                currPageNo = $("#totalPage").text();
            }
            $("#currPageNo").text(currPageNo);
            selectByCategory();

            return false;
        })
        $(".am-pagination li:eq(3) a").click(function () {
            currPageNo = $("#totalPage").text();
            selectByCategory();
            $("#currPageNo").text(currPageNo);
            return false;
        })
        $(".am-pagination li:eq(4) select").blur(function () {
            pageSize = $(this).val();
            currPageNo = 1;
            $("#currPageNo").text(1);
            selectByCategory();
        })
        $("#select1 dd").click(function () {
            $(this).addClass("selected").siblings().removeClass("selected");
            $("#select1 .dd-conent").attr("title", $(this).find("a").attr("href"));
            brandId = $("#select1 .dd-conent").attr("title");
            selectByCategory();
            return false;
        });
        $("#select2 dd").click(function () {
            $(this).addClass("selected").siblings().removeClass("selected");
            $("#select2 .dd-conent").attr("title", $(this).find("a").attr("href"));
            kindId = $("#select2 .dd-conent").attr("title");
            selectByCategory();
            return false;
        });

        $("#select3 dd").click(function () {
            $(this).addClass("selected").siblings().removeClass("selected");
            return false;
        });

    })
</script>
<div class="theme-popover-mask"></div>

</body>
</html>